import React, { useEffect, useState } from 'react'
import { useParams ,useNavigate} from 'react-router-dom'
import { gethomedetail, gethomedetail1 } from '../../api/detailService'
import parse from 'html-react-parser'
import styles from './homedetail.module.scss'
import {  NavBar, } from 'antd-mobile'
const Index = () => {
  const { id } = useParams()
  const [detail, setDetail] = useState<any>(null)
  const getList = async () => {
    if (!id) return
    try {
      const res: any = await gethomedetail(id as string)
      // gethomedetail 已返回 res.data，这里直接就是详情对象
      setDetail(res || null)
    } catch (e) {
      setDetail(null)
      console.error('获取详情失败', e)
    }
  }
  useEffect(() => {
    getList()
  }, [id])
  const nav=useNavigate()

  return (
    <div>
       <NavBar onBack={() => nav(-1)} style={{borderBottom:'1px solid #e5e5e5'}}>健康资讯</NavBar>
      {detail ? (
        <div className={styles.homesetailbox}>
          <h1>{detail.title}</h1>
          <p className={styles.pbox}><span>{detail.date_str}</span><span>阅读量:{detail.view_times}</span></p>
          <div className={styles.imgbox}>{detail?.content ? parse(detail.content) : null}</div>
        </div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  )
}

export default Index
